<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">应急抢修</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Preservation' }">重要保电</el-breadcrumb-item>
        <el-breadcrumb-item>保电方案</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" :compRef="table.compRef" ref="gjxm"
        @pageChange="handleSizeChange" :columns="table.columns" :title="table.title" :actions="table.actions"
        :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <!-- 保电方案 -->
        <DialogForm ref="formConfigData" slot="slot1" :formConfig="formConfig1" />
        <div slot="slot2">
          <DialogForm ref="formCheckData" :formConfig="formCheckData" />
        </div>
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>
import { showTime } from "@/lib";
import { electricity, electricityProtectionSave, doUpdById, doDelete } from "@/api/emergencyRepair.js";
export default {
  components: {},
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        // creatorDeptId: (org && JSON.parse(org).id) || "",
        unitName: (org && JSON.parse(org).unitName) || ""
      };
      return creator;
    }
  },
  data() {
    return {
      // 筛选信息
      formData: [
        {
          elType: "input",
          id: "bdlx",
          label: "保电类型",
          attrs: {
            value: "",
            size: "small",
            "collapse-tags": true,
            clearable: true
          },
          options: []
        },
        {
          elType: "dateTimePicker",
          id: "dutyDate",
          label: "保电时间",
          attrs: {
            value: "",
            size: "medium",
            type: "datetimerange",
            clearable: true,
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      // 表格信息
      table: {
        isSelectFlag: false,
        compRef: "gjxm",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "保电方案列表",
        actions: [
          {
            id: "dialogVisible",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "bdfamc",
            label: "保电方案名称",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: (row) => {
                            // this.handleEmergencyEvents(row);
                          }
                        }
                      }}
                    >
                      {row.bdfamc}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "bdlx",
            label: "保电类型",
            align: "center"
          },
          {
            prop: "bddd",
            label: "保电地点",
            align: "center"
          },
          {
            prop: "bddw",
            label: "保电单位",
            align: "center"
          },
          {
            prop: "bdfw",
            label: "保电范围",
            align: "center",
            "min-width": "150px"
          },
          {
            prop: "bdkssj",
            label: "保电开始时间",
            align: "left",
            "min-width": "200px"

          },
          {
            prop: "bdjssj",
            label: "保电结束时间",
            align: "left",
            "min-width": "200px"
          },

          {
            prop: "zt",
            label: "状态",
            align: "center",
            "min-width": "100px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === "0") {
                return "编辑中";
              } else if (cellValue === "1") {
                return "待审批";
              } else {
                return "已下发";
              }
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            "min-width": "120px",
            render: (h, scope) => {
              return (
                <div>
                  <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                    on: {
                      click: () => {
                        this.edit(scope.row);
                      }
                    }
                  }}>
                    编辑
                  </span>
                  <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                    on: {
                      click: () => {
                        this.delete(scope.row.id);
                      }
                    }
                  }}>
                    删除
                  </span>
                </div >
              );
            }
          }
        ],
        tableList: {
          isSelectFlag: true,
          compRef: "rwxx",
          isSequenceFlag: true,
          isShowPage: true,
          resetFlag: true,
          autoHeight: true,
          loading: false,
          title: "新增保电方案"
        },
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },

      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      activeNames: ["1", "2", "3", "4"],
      form: {},
      pageNum: 1,
      isEdit: false,
      multipleSelection: [],
      // 弹窗信息
      dialogConfig: {
        title: "新增保电方案",
        isShow: false,
        btnList: [
          {
            name: "提交",
            id: "consentSubmit", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "保存",
            id: "BSave", // 事件名
            size: "small"
          },
          {
            name: "取消",
            id: "getBack", // 事件名
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "保电方案",
          name: "1",
          slot: "slot1"
        },
        {
          title: "填报信息",
          name: "2",
          slot: "slot2"
        }
      ],
      formConfig1: {
        formData: [
          {
            type: "input",
            label: "保电方案名称",
            prop: "bdfamc",
            // name: "bdfamc",
            class: "sjgy",
            lableWidth: "130px",
            options: []
          },
          {
            type: "input",
            label: "保电类型",
            prop: "bdlx",
            // name: "bdlx",
            class: "half",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "保电单位",
            prop: "bddw",
            // name: "eventLvName",
            class: "half",
            lableWidth: "120px"
          },
          {
            type: "dataPicker",
            label: "保电开始时间",
            prop: "bdkssj",
            class: "half",
            dateType: "datetime",
            lableWidth: "120px"
          },
          {
            type: "dataPicker",
            label: "保电结束时间",
            prop: "bdjssj",
            class: "half",
            dateType: "datetime",
            lableWidth: "120px"
          },
          {
            type: "textarea",
            label: "保电地点",
            prop: "bddd",
            class: "sjgy",
            lableWidth: "120px"
          },
          {
            type: "textarea",
            label: "保电范围",
            class: "sjgy",
            prop: "bdfw",
            lableWidth: "120px"
          }
        ],
        rules: {
          emergencyId: [
            { required: true, message: "请选择输入方案名称", trigger: "blur" }
          ],
          eventCode: [
            { required: true, message: "请输入保电类型", trigger: "blur" }
          ]
        }
      },

      formCheckData: {
        // disabled: true,
        formData: [
          {
            type: "input",
            label: "发布人",
            prop: "creatorName",
            class: "iputsse",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "createDeptName",
            class: "iputsse",
            isDisabled: true,
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "下发时间",
            prop: "createTime",
            class: "iputsse",
            isDisabled: true,
            lableWidth: "100px"
          }

        ]
      },
      rules: {
      }
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.list();
    },
    // 查询
    async query() {
      const params = {
        pageNum: this.pageNum,
        pageSize: 10,
        ...this.form
      };
      this.list(params);
    },
    handleBtn(item) {
      this[item.id]();
    },
    // 列表
    async list(val) {
      let params = {
        pageNum: this.pageNum,
        pageSize: 10
      };
      if (val) {
        params = {
          ...val
        };
      }
      const res = await electricity(params);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 新增
    dialogVisible() {
      this.dialogConfig.isShow = true;
      this.isEdit = false;
      this.dialogConfig.title = "新增保电方案";
      this.$nextTick(() => {
        this.$set(this.$refs.formCheckData.form, "creatorName", this.getCreator.name);
        this.$set(this.$refs.formCheckData.form, "createDeptName", this.getCreator.dept);
        // this.$set(this.$refs.formCheckData.form, "createTime", new Date().toLocaleString().replace(/\//g, "-"))
        this.$set(this.$refs.formCheckData.form, "createTime", showTime(new Date()));
      });
    },
    edit(row) {
      this.dialogConfig.isShow = true;
      this.isEdit = true;
      this.dialogConfig.title = "编辑保电方案";
      this.$nextTick(() => {
        this.$refs.formConfigData.form = row;
        this.$set(this.$refs.formCheckData.form, "creatorName", this.getCreator.name);
        this.$set(this.$refs.formCheckData.form, "createDeptName", this.getCreator.dept);
        // this.$set(this.$refs.formCheckData.form, "createTime", new Date().toLocaleString().replace(/\//g, "-"))
        this.$set(this.$refs.formCheckData.form, "createTime", showTime(new Date()));
      });
    },
    BSave() {
      if (this.isEdit) {
        this.doEdit();
      } else {
        this.doAdd();
      }
    },
    async delete(id) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await doDelete({ id });
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.list();
      });

    },
    async doEdit() {
      const params = {
        ...this.$refs.formConfigData.form,
        ...this.$refs.formCheckData.form
      };
      await doUpdById(params);
      this.dialogConfig.isShow = false;
      this.$refs.formConfigData.resetFields();
      this.$refs.formCheckData.resetFields();
      this.list();

    },
    async doAdd() {
      const params = {
        ...this.$refs.formConfigData.form,
        ...this.$refs.formCheckData.form
      };
      const res = await electricityProtectionSave(params);
      console.log(res, "res");
      this.dialogConfig.isShow = false;
      this.$refs.formConfigData.resetFields();
      this.$refs.formCheckData.resetFields();
      this.list();
    },

    consentSubmit() {
      if (this.isEdit) {
        this.doEdit();
      } else {
        this.doAdd();
      }
    },
    // 取消
    getBack() {
      this.dialogConfig.isShow = false;
      this.$refs.formConfigData.resetFields();
      this.$refs.formCheckData.resetFields();
    },

    close() {
      this.dialogConfig.isShow = false;
      this.$refs.formCheckData.resetFields();
      this.$refs.formConfigData.resetFields();

    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

/deep/ .el-table tr {
  background: none !important;
}

.box {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
